<template>
  <div :class="prefixCls">
    <template v-for="item in urls" :key="item[valueField]">
      <a>
        <span @click="handleReview(item)">{{ item[labelField] }}</span>
        <span style="margin-left: 20px" @click="handleRemove(item)" v-if="showDelIcon"
          ><DeleteOutlined
        /></span>
      </a>
    </template>
  </div>
  <BasicModal
    :wrapClassName="prefixCls + '-modal'"
    destroyOnClose
    :footer="null"
    width="60%"
    title="预览"
    :defaultFullscreen="true"
    @register="registerModal"
  >
    <template #title>
      <div> 预览 </div>
    </template>
    <div class="relative h-full min-h-[65vh]">
      <div v-if="curtItem[downloadField]" class="absolute top-0 right-0 action">
        <a-button @click="handleDownload"> 下载 </a-button>
      </div>
      <FramePage class="absolute w-full" :frameSrc="frameSrc" />
    </div>
  </BasicModal>
</template>

<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { isObject, isArray, isString, isJson, isUrl } from '/@/utils/is';
  import { downloadByApiUrl } from '/@/utils/file/download';

  import { basicProps } from './props';
  import FramePage from './Iframe.vue';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { commonFilePreviewApi } from '/@/api/config-center/model-design';
  import { DeleteOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'HFileReview',
    components: { BasicModal, FramePage, DeleteOutlined },
    props: basicProps,
    emits: ['remove'],
    setup(props, { emit }) {
      const { prefixCls } = useDesign('h-file-review');
      const [registerModal, { openModal }] = useModal();
      const urls = computed(() => {
        const labelField = props.labelField || 'label';
        const valueField = props.valueField || 'value';
        if (isJson(props.info as string)) {
          const data = JSON.parse(props.info as string);

          if (!data) return [];

          if (isArray(data)) {
            return data;
          }
          if (isObject(data)) {
            return [data];
          }

          return [{ [labelField]: data, [valueField]: data }];
        }

        if (isArray(props.info)) {
          return props.info;
        }
        if (isObject(props.info)) {
          return [props.info];
        }

        if (isString(props.info)) {
          return [{ [labelField]: props.info, [valueField]: props.info }];
        }
        return [];
      });

      const frameSrc = ref('');
      const curtItem = ref({});

      const handleDownload = () => {
        const item = curtItem.value;
        const labelField = props.valueField || 'label';
        const downloadField = props.downloadField || 'url';
        downloadByApiUrl({
          url: item[downloadField],
          fileName: item[labelField] || item['fileName'],
        });
      };

      const handleReview = async (item) => {
        curtItem.value = item;
        const labelField = props.valueField || 'label';
        const valueField = props.valueField || 'value';
        if (isUrl(item[valueField])) {
          downloadByApiUrl({ url: item[labelField], fileName: item[labelField] });
          return;
        }
        frameSrc.value = '';
        const data = await commonFilePreviewApi(item[valueField]);
        frameSrc.value = data;
        openModal();
      };

      const handleRemove = async (item) => {
        emit('remove', item);
      };

      return {
        prefixCls,
        frameSrc,
        urls,
        curtItem,
        isUrl,
        registerModal,
        handleReview,
        handleDownload,
        handleRemove,
      };
    },
  });
</script>
<style lang="less">
  @import './index.less';
</style>
